<template>
	<div class="operation-list">
		<list-title :data="header"></list-title>
		<list-table :list="operationList" :tableLoading="tableLoading" :footer="true" :pagination="pagination" :batch="batch" @batchChange="batchChange">
			<template v-slot:data>
				<el-table-column prop="log_id" label="编号" width="80px"></el-table-column>
				<el-table-column prop="loginname" label="登录名" width="120"></el-table-column>
				<el-table-column prop="backCode" label="返回码" width="100"></el-table-column>
				<el-table-column prop="backInfo" label="返回信息"></el-table-column>
				<el-table-column prop="modelError" label="模型验证错误">
					<template slot-scope="scope">
						<div v-html="scope.row.modelError"></div>
					</template>
				</el-table-column>
				<el-table-column prop="exceptionError" label="异常错误"></el-table-column>
				<el-table-column prop="addTime" label="产生时间" width="150"></el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-button type='text' size="mini" @click="detail(scope.$index, scope.row)">详情</el-button>
						<el-popover
						placement="top"
						width="160"
						v-model="delTip[scope.$index+1]">
							<p class="del-tip"><span class="el-icon-question"></span>确定删除吗？</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="text" @click="delTip.splice(scope.$index+1, 1, false)">取消</el-button>
								<el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
							</div>
							<el-button type="text" slot="reference" :disabled='submitLock[scope.$index+1]'>
								删除 <span class="el-icon-loading" v-if='submitLock[scope.$index+1]'></span>
							</el-button>
						</el-popover>
					</template>
				</el-table-column>
			</template>
		</list-table>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {domain} from '@/api';

export default {
	inject: ['reload'],
	data() {
		return {
			/*头部数据*/
			header: {
				title: '操作日志列表',
				reload: true
			},
			operationList: [
				// {
				// 	log_id: 0,
				// 	loginname: '',
				// 	backCode: '',
				// 	backInfo: '',
				// 	modelError: '',
				// 	exceptionError: '',
				// 	addTime: '',
				// },
			],
			pagination: {
				count: 0,
				currPage: 1,
				pageSize: 3
			},
			delTip: [],//刪除提示
			submitLock: [],
			/*批量操作*/
			batch: [
				{
					id: '5',
					label: '批量删除'
				}
			],
			tableLoading: true,
		};
	},
	components: {
		ListTitle,
		ListTable,
	},
	created: function() {
    	/*获取错误数据*/
		this.getOperationList()
    },
    watch: {
		/*监听路由变化，根据参数查询数据*/
		'$route' (to){
			this.tableLoading = true
			this.getOperationList()
		}
	},
	methods: {
		/*获取操作列表*/
		getOperationList: function(){
			this.$baseURL(domain.ac)
			this.$get(this.$api.operationLogList, this.$route.query).then(res => {
				// console.log(res);
				if(res.data.code == 10007){//后台提示需要登录
					this.$cookie.remove('isLogin');//刪除cookie登录信息
					this.reload();
				}
				if(res.data.code === 0){
					if(res.data.data != undefined){
						this.operationList = []
						Object.keys(res.data.data.list).forEach((k) => {
							// console.log(this._formatMedelError(res.data.data.list[k].model_error));
							this.operationList.push ({
								log_id: res.data.data.list[k].log_id,
								loginname: res.data.data.list[k].loginname,
								backCode: res.data.data.list[k].back_code,
								backInfo: res.data.data.list[k].back_info,
								// modelError: (res.data.data.list[k].model_error != '')?JSON.stringify(JSON.parse(res.data.data.list[k].model_error)):'',
								modelError: this._formatMedelError(res.data.data.list[k].model_error),
								exceptionError: res.data.data.list[k].message,
								addTime: res.data.data.list[k].add_time
							});
						})
						this.pagination = res.data.data.pageInfo
					}
					this.tableLoading = false
				}
			})
			.catch(err => {})
			.finally(() => {
				this.loading = false
			}) 
		},
		_formatMedelError: function(val){
			let obj = (val != '')?JSON.parse(val):'';
			let res = '';
			for(let key in obj){
				res += '<b>' + key + '</b>:' + obj[key] + '<br>';
			}
			return res;
		},
		/*查看详情*/
		detail: function(index, row){
			console.log(row)
		},
		/*单个删除*/
		handleDelete(index, row) {
			if(!this.submitLock[index+1]){
				this.submitLock[index+1] = true//锁住当前的 删除按钮
				this.delTip.splice(index+1, 1, false)//提示消失
				/*请求后台删除*/
				this.$baseURL(domain.ac)
				this.$post(this.$api.delOperationLog, {
					'id': row.log_id,
				}).then(res => {
					if(res.data.code == 10007){//后台提示需要登录
						this.$cookie.remove('isLogin');//刪除cookie登录信息
						this.reload();
					}
					if(res.data.code == 0){
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'success'
						});
						this.reload();
					}else{
						this.$message({
							showClose: true,
							message: res.data.info,
							type: 'error'
						});
					}
					this.submitLock[index+1] = false//释放当前的 删除按钮
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*
		批量操作
		val 操作什么类型，批量删除，还是更改状态....
		data 需要操作的数据
		*/
		batchChange: function(flag, data) {
			// console.log(flag)
			// console.log(data)
			switch(flag) {
				case '5'://批量删除
					var api = this.$api.delOperationLog
					break
			}
			/*请求后台*/
			this.$baseURL(domain.ac)
			this.$post(api, {
				'flag': flag,
				'id': data,
			}).then(res => {
				if(res.data.code == 10007){//后台提示需要登录
					this.$cookie.remove('isLogin');//刪除cookie登录信息
					this.reload();
				}
				if(res.data.code == 0){
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'success'
					});
					this.reload();
				}else{
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'error'
					});
				}
				this.submitLock[index+1] = false//释放当前的 删除按钮
			})
			.catch(err => {})
			.finally(() => {}) 
		}
	},
};
</script>

<style lang="stylus" scoped>

</style>